<template>
	<view class="main_box">
		<u-navbar back-text="" title="往约到家" :background="background" title-color='#FFF' back-icon-color='#FFF'></u-navbar>
				<view class="content">
					<!-- 正文内容 -->
					<view class="">
						<view class="good_title" style="">商品列表</view>
					</view>
					<!-- 产品介绍 -->
					<view class="good_img">
						<image class="img" src="https://cdn.uviewui.com/uview/swiper/1.jpg" mode=""></image>
						<view class="jie">
							<text class="obj">皇家足疗</text>
							<text class="person">爱新觉罗悟</text>
							<text class="price">￥289</text>
							<text class="pai">高级按摩师</text>
						</view>
						
					</view>
					<!--信息-->
					
					<view class="sub_info">
						<u-form :model="form" ref="uForm">
							<u-form-item  label-width='auto' label="联系电话">
								<u-input placeholder="请输入联系电话" v-model="form.username" />
							</u-form-item>
							<u-form-item   label-width='auto' label="联系人">
								<u-input  placeholder="请输入联系人"v-model="form.username" />
							</u-form-item>
							<!-- <u-form-item   label-width='auto' label="服务时间"> -->
							<view style="height: 80rpx;line-height: 80rpx;">
								<text>服务时间</text>
								<text  style="color: #C0C4CC!important;margin-left:10rpx;"     @click="select_time">
									{{timeItem}}
								</text>
							</view>
								
							<!-- </u-form-item> -->
							<u-form-item label-width='auto' label="服务地址">
								<u-input  placeholder="请输入服务地址"  v-model="form.username" />
							</u-form-item>
							<u-form-item  label-width='auto' label="门牌号">
								<u-input  placeholder="请输入门牌号" v-model="form.username" />
							</u-form-item>
						</u-form>
					</view>
					
					<!-- 协议 -->
					<view class="xie">
						<label>
								<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list" :key="index">
									<text>阅读并同意</text>
									<text @click="servers" style="color: #F00">{{name}}</text>
									<!-- {{item.name}} -->
								</u-checkbox>
									
						</label>			
					</view>
					<!-- 支付方式 -->
					<u-cell-group>
							<u-cell-item :arrow="false" title="支付方式"></u-cell-item>
							<u-cell-item :arrow="false"  title="微信" value="已选">
								<u-icon slot="icon" size="50" name="weixin-fill"  color="#0f0" ></u-icon>
								
							</u-cell-item>
							<u-cell-item :arrow="false"  title="支付宝" value="已选">	
							<u-icon slot="icon" size="50" name="zhifubao-circle-fill"  color="#409eff" ></u-icon>
							
							</u-cell-item>
							
							<u-cell-item :arrow="false"  title="余额" value="已选">
								<u-icon slot="icon" size="50" name="rmb-circle-fill"  color="#ff5500" ></u-icon>
								
							</u-cell-item>
							<u-cell-item style="padding-top:5rpx;" :arrow="false"   title="选择使用优惠券" >
							
							</u-cell-item>
							 
						<view style="margin-left: 30rpx;">
							<u-icon name="red-packet-fill" color="#ff0000" style='display: inline-block;'></u-icon>
							<picker style="display: inline-block;margin-left: 20rpx;margin-top: 15rpx;" @change="leaveTypeChange($event,leaveTypeList)" :value="leaveTypeIndex" :range="leaveTypeList"
								 :range-key="'leaveTypeName'">
									<view class="uni-input">{{leaveTypeList[leaveTypeIndex].leaveTypeName}}</view>
								</picker>
								<u-icon name="arrow-down" style='display: inline-block;margin-left: 20rpx;'></u-icon>
						</view>
							
							<u-cell-item  style="text-align: left;" :arrow="false"   title="出行方式(注:全程共计0公里,起步价10.00元,2.00公里,超出2.00公里后每公里2.50元)" value="">
							</u-cell-item>
					</u-cell-group>
					<!-- 优惠 -->
					<view class="ybox">
						<u-cell-item :arrow="false" title='商品金额' value='￥298'></u-cell-item>
						<u-cell-item :arrow="false" title='车费' value='+￥88'></u-cell-item>
						<u-cell-item :arrow="false" title='优惠券' value='-￥80'></u-cell-item>
						
					<view style="height: 200rpx;margin-bottom: 80rpx;"></view>
					</view>
					
				</view>
		
				<!-- 总计 -->
				<view  class="total">
					<view class="heji" type="">合计：￥306</view>
					<button class="order" type="" @click="orderSub(1)">提交订单</button>
				</view>
				
			
			<u-popup v-model="show"  mode="bottom">
			<nx-time-picker :timeList="date1" :startTime="startTime" dateType @showClose="showClose" @showTime="showTime" @checkDate="checkDate" @timeDate="timeDate"></nx-time-picker>

			</u-popup>
			
			
			
			
					
	</view>
</template>

<script>
	import nxTimePicker  from '@/components/nx-time-picker/nx-time-picker.vue';
	import timer from '@/components/timer/timer.json';
	export default {
		components:{
		    nxTimePicker,
			timer
		},
		data() {
			return {
				timeItem:'请选择服务时间',
				startTime:'2021/06/29',
				laterMIn:2,
				startHour:0,
				endHour:24,
				step:30,
				afterHours:1,
				show: false,
				display:'none',
				date1:timer,
				   
				text:'order',
				background:{
					backgroundColor: '#19BE6B',
					backgroundSize: 'cover',
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))',
					
					
				},
				form: {
					username: '',
					intro: '',
					sex: ''
				},	
					name:'《服务协议》',
				list: [
					{
						// name: '《服务协议》',
						checked: false,
						disabled: false
					},
								
				],
				leaveTypeList:[
							{leaveTypeName: "不使用优惠券"},
							{leaveTypeName: "全部项目通用50元"},
							{leaveTypeName: "全部项目通用80元"},
							{leaveTypeName: "全部项目通用100元"},
							{leaveTypeName: "全部项目8折"}
						],
				leaveTypeIndex:0,
				// timeLists:[]
				curDate:'',
				submitDate:'',
				submitTime:''
			}
		},
	    onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			//console.log(option); //打印出上个页面传递的参数。
			this.text=option.name;
			this.startTime=new Date().valueOf();
			
			// let current=new Date(this.startTime + 8 * 3600 * 1000).toJSON().substr(0, 16).replace('T', '-').split('-');
			// //console.log(current)
			this.updateStatus(0);
		
		
	    },
		methods: {
		
				// 选中某个复选框时，由checkbox时触发
				checkboxChange(e) {
					//console.log(e);
				},
				servers(){
					uni.navigateTo({
						url:'/pages/serverNote/index'
					})
				},
				
				leaveTypeChange: function(e,storage) {
						this.leaveTypeIndex = e.target.value
						this.leaveTypeData = storage[this.leaveTypeIndex].leaveTypeName	// 这里就是选中的内容
						// console.log(e.target.value);
						// console.log(this.leaveTypeData);
				},
				select_time(){
					this.display='block';
					this.show=true;
				},
				// 时间插件
				showClose(){
				        //console.log("点击了取消")
						this.show=false;
				    }, 
				showTime(obj){
					this.show=false; 
					// var myDate = new Date();
					// var abc=myDate.getYear()."-";      //获取当前日期
					let dates = new Date()
					let year = dates.getFullYear();
					let month = dates.getMonth() + 1;
					let date = dates.getDate();
					if(month<10){
						month='0'+month;
					}
					if(date<10){
						date='0'+date;
					}
					let abc=year+'-'+month+'-'+date;
					
					if(this.curDate=0){
						this.curDate=abc
					}
					let arr=new Array();
					for(let i=0;i<obj.time.length;i++){
						//console.log(this.date1[obj.time[i]].startTime); 
						 //console.log(obj.time[i]);
						 arr.push(obj.time[i]);
						 //this.week[i].dateall
					}
					//console.log(arr);
					//console.log(abc)
					this.submitDate=abc;
					this.submitTime=arr;
				},
				updateStatus(res){
					for(let index=0;index<this.date1.length;index++){
						let dates = new Date()
							let year = dates.getFullYear();
							let month = dates.getMonth() + 1;
							let date = dates.getDate();
							let day = dates.getDay();
							let hour = dates.getHours();
							let min = dates.getMinutes();
							if(month<10){
								month='0'+month;
							}
							if(date<10){
								date='0'+date;
							}
							if(min<10){
								min='0'+min;
							}
							
							let allDate= year+'/'+month+'/'+date+' '+this.date1[index].startTime+':00';//
						
							let current= year+'/'+month+'/'+date+' '+(hour+this.laterMIn)+':'+min+':00';
							let tip= new Date(allDate).getTime()/1000;//
							let currentTimp=new Date(current).getTime()/1000;
							if(res==0){
								if(tip<currentTimp){
									this.date1[index].isCan=1;
								}
							}else{
								this.date1[index].isCan=0;
							}		
						}		
					
				},
				checkDate(date){
						let curDay=new Date(this.startTime + 8 * 3600 * 1000).toJSON().substr(0, 19).replace('T', '-').split('-');
						curDay=curDay[0]+'-'+curDay[1]+'-'+curDay[2];
						if(curDay==date.dateall){
							this.updateStatus(0)
						}else{
							this.updateStatus(1)
						}
				        this.date1 = this.date1;
						this.curDate=date.dateall;
						//console.log(this.curDate);
				    },
					timeDate(date){
						//console.log(date);
					},
					orderSub(id){
						
						console.log(this.submitDate);
						console.log(this.submitTime);
						// this.submitDate=this.curDate;
						// this.submitTime=arr
						// this.$u.route({
						// 	url: '/pages/suc/index',
						// 	params: {
						// 		id: id
						// 	}
						// })
					}
				
			}
	}
</script>

<style>
	.total{
		display: inline-block;
		width: 100%;
		height: 80rpx;
		position: fixed;
		bottom: 0;
	}
	.heji{
		width: 50%;
		display: inline-block;
		border: none!important;
		color: #F00;
		background-color: #FFFFFF;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		z-index: 2000;
	}
	.order{
		width: 50%;
		display: inline-block;
		background-color: #FF0000!important;
		color:#FFFFFF!important;
		position: fixed;
		bottom: 0;
		float: right;
		opacity: 1;
		z-index: 2000;
	}
	
	.ybox{
		background-color: #FFFFFF;
		margin-top: 10rpx;
		flex-direction: left;
	}
	.xie{
		background-color: #FFFFFF;
		height: 80rpx;
		line-height: 80rpx;
		margin-top: 10rpx;
		padding-left: 30rpx;
	}
	.sub_info{
		background-color: #FFFFFF;
		margin-top: 10rpx;
		padding-left: 25rpx;
	}
	.main_box{
		margin: 0 10rpx;
	}
	.good_title{
		width: 100%;
		height: 80rpx;
		padding: 15rpx;
		border-bottom: 1rpx solid #C8C9CC;
		font-size: 32rpx;
		background-color: #FFFFFF;
	}
	.good_img{
		display: inline-block;
		width: 100%;
		background-color: #FFFFFF;
	}
	.img{
		width: 180rpx;
		height: 180rpx;
		padding: 15rpx;
		display: inline-block;
		float: left;
	}
	.jie{
		/* float: left; */
	}
	.obj{
		float: left;
		font-size: 30rpx;
		font-weight: bold;
		margin-top:35rpx;
	}.price{
		float: left;
		font-size: 30rpx;
		margin-top:35rpx;
		margin-left: 120rpx;
	}
	.person{
		float: left;
		font-size: 28rpx;
		margin-top: 125rpx;
		margin-left:-120rpx;
	}.pai{
		float: left;
		font-size: 28rpx;
		margin-top: 125rpx;
		margin-left: -70rpx;
		
	}
	.sub_info{
		
	}
</style>
